<!DOCTYPE html><html lang="zh-CN"><head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML5语义标签完整应用示例</title>
   <style>
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           font-family: "Microsoft YaHei", sans-serif;
       }
       body {
           line-height: 1.8;
           color: #333;
           background-color: #f9fafb;
       }
       .container {
           max-width: 1200px;
           margin: 0 auto;
           padding: 0 20px;
       }
       /* 头部样式 */
       header {
           background-color: #2d3748;
           color: white;
           padding: 20px 0;
           margin-bottom: 30px;
       }
       .header-content {
           display: flex;
           justify-content: space-between;
           align-items: center;
       }
       .logo {
           font-size: 1.8em;
           font-weight: bold;
       }
       /* 导航样式 */
       nav ul {
           display: flex;
           gap: 30px;
           list-style: none;
       }
       nav a {
           color: white;
           text-decoration: none;
           transition: color 0.3s;
       }
       nav a:hover {
           color: #93c5fd;
       }
       /* 主内容区布局 */
       .main-wrapper {
           display: flex;
           gap: 30px;
           margin-bottom: 40px;
       }
       main {
           flex: 3;
       }
       aside {
           flex: 1;
           background-color: white;
           border-radius: 8px;
           padding: 20px;
           box-shadow: 0 2px 8px rgba(0,0,0,0.05);
       }
       /* 区块通用样式 */
       section {
           background-color: white;
           border-radius: 8px;
           padding: 25px;
           margin-bottom: 30px;
           box-shadow: 0 2px 8px rgba(0,0,0,0.05);
       }
       section h2 {
           color: #2d3748;
           margin-bottom: 20px;
           padding-bottom: 10px;
           border-bottom: 2px solid #e2e8f0;
       }
       /* 文章样式 */
       article {
           margin-bottom: 25px;
           padding-bottom: 20px;
           border-bottom: 1px dashed #e2e8f0;
       }
       article:last-child {
           margin-bottom: 0;
           padding-bottom: 0;
           border-bottom: none;
       }
       article header h3 {
           color: #2b6cb0;
           margin-bottom: 10px;
       }
       .post-meta {
           color: #718096;
           font-size: 0.9em;
           margin-bottom: 15px;
       }
       article footer {
           margin-top: 15px;
           font-size: 0.9em;
           color: #718096;
       }
       /* 评论区样式 */
       .comment {
           padding: 15px;
           background-color: #f7fafc;
           border-radius: 6px;
           margin-bottom: 15px;
       }
       /* 侧边栏样式 */
       aside h3 {
           color: #2d3748;
           margin-bottom: 15px;
           padding-bottom: 8px;
           border-bottom: 2px solid #e2e8f0;
       }
       .tag-list {
           display: flex;
           flex-wrap: wrap;
           gap: 10px;
           margin-bottom: 25px;
       }
       .tag-list a {
           text-decoration: none;
           color: #2b6cb0;
           background-color: #ebf4ff;
           padding: 5px 12px;
           border-radius: 20px;
           font-size: 0.9em;
       }
       .recommend-list {
           list-style: none;
       }
       .recommend-list li {
           margin-bottom: 10px;
       }
       .recommend-list a {
           color: #2d3748;
           text-decoration: none;
           transition: color 0.3s;
       }
       .recommend-list a:hover {
           color: #2b6cb0;
       }
       /* 页脚样式 */
       footer {
           background-color: #2d3748;
           color: white;
           padding: 30px 0;
           text-align: center;
       }
       .footer-info {
           margin-top: 10px;
           font-size: 0.9em;
           color: #a0aec0;
       }
       /* 时间标签样式 */
       time {
           color: #2b6cb0;
           font-weight: 500;
       }
   </style></head><body>
   <!-- 页面级头部：包含网站标识与全局导航触发 -->
   <header>
       <div class="container header-content">
           <div class="logo">前端技术驿站</div>
           <nav>
               <ul>
                   <li><a href="#">首页</a></li>
                   <li><a href="#html-tutorial">HTML教程</a></li>
                   <li><a href="#css-tutorial">CSS教程</a></li>
                   <li><a href="#js-tutorial">JS教程</a></li>
                   <li><a href="#about">关于我</a></li>
               </ul>
           </nav>
       </div>
   </header>

   <div class="container">
       <!-- 主内容与侧边栏布局容器 -->
       <div class="main-wrapper">
           <!-- 页面核心内容区：唯一且包含主要交互内容 -->
           <main>
               <!-- 文章列表区块：主题明确的功能模块 -->
               <section id="html-tutorial">
                   <h2>HTML5专题文章</h2>
                   
                   <!-- 独立文章1：可单独提取复用的内容单元 -->
                   <article>
                       <header>
                           <h3>HTML5语义标签实战指南：从规范到落地</h3>
                           <div class="post-meta">
                               发布于 <time datetime="2024-03-15T09:30:00+08:00">2024年3月15日 09:30</time> | 作者：前端老A                            </div>
                       </header>
                       <p>HTML5语义标签并非简单替代div，其核心价值在于"内容含义的结构化表达"。例如&lt;nav&gt;明确标识导航区域，&lt;main&gt;界定核心内容，这些标签能让浏览器、搜索引擎及辅助设备快速理解页面架构，同时提升代码可维护性...</p>
                       <footer>
                           分类：<a href="#">HTML5进阶</a> | 阅读：2.3k | 评论：48                        </footer>
                   </article>

                   <!-- 独立文章2：包含完整的内容上下文 -->
                   <article>
                       <header>
                           <h3>time标签的正确用法：不止于显示日期</h3>
                           <div class="post-meta">
                               发布于 <time datetime="2024-02-28T14:15:00+08:00">2024年2月28日 14:15</time> | 作者：前端老A                            </div>
                       </header>
                       <p>很多开发者仅用time标签显示文本日期，却忽略了其核心属性datetime的价值。该属性支持ISO 8601标准时间格式（如2024-02-28T14:15:00+08:00），能让搜索引擎精准识别发布时间，辅助内容排序；同时，屏幕阅读器可通过该属性为视障用户提供更准确的时间信息...</p>
                       <footer>
                           分类：<a href="#">HTML基础</a> | 阅读：1.8k | 评论：32                        </footer>
                   </article>
               </section>

               <!-- 评论区区块：与文章相关的交互内容 -->
               <section>
                   <h2>读者热评</h2>
                   
                   <!-- 独立评论1：具备完整上下文的内容单元 -->
                   <article class="comment">
                       <header>
                           <div class="post-meta">
                               评论者：小明 | 评论时间：<time datetime="2024-03-16T10:20:00+08:00">2024年3月16日 10:20</time>
                           </div>
                       </header>
                       <p>之前一直用div嵌套做布局，看完文章才知道语义标签对SEO的帮助这么大！已经把项目里的导航和头部都换成nav和header了，代码确实清爽了很多。</p>
                   </article>

                   <!-- 独立评论2：可单独呈现的内容单元 -->
                   <article class="comment">
                       <header>
                           <div class="post-meta">
                               评论者：小李 | 评论时间：<time datetime="2024-03-15T16:45:00+08:00">2024年3月15日 16:45</time>
                           </div>
                       </header>
                       <p>补充一点：time标签的datetime属性还支持持续时间格式，比如&lt;time datetime="PT2H30M"&gt;2小时30分钟&lt;/time&gt;，适合标注课程时长这类场景，亲测有效！</p>
                   </article>
               </section>
           </main>

           <!-- 辅助内容区：与主内容相关的补充信息 -->
           <aside>
               <h3>关于博主</h3>
               <p>10年前端开发工程师，专注HTML5/CSS3/JavaScript技术研究，曾主导多个企业级响应式项目开发，热衷于分享实战经验。</p>

               <h3>热门标签</h3>
               <div class="tag-list">
                   <a href="#">HTML5语义化</a>
                   <a href="#">响应式设计</a>
                   <a href="#">time标签</a>
                   <a href="#">无障碍开发</a>
                   <a href="#">SEO优化</a>
               </div>

               <h3>推荐阅读</h3>
               <ul class="recommend-list">
                   <li><a href="#">CSS Grid与Flexbox混合布局技巧</a></li>
                   <li><a href="#">JavaScript事件委托的原理与实践</a></li>
                   <li><a href="#">前端无障碍开发：从标签到交互</a></li>
               </ul>
           </aside>
       </div>

       <!-- 页面级页脚：包含全局版权与联系信息 -->
       <footer id="about">
           <div class="copyright">© 2020-2024 前端技术驿站 版权所有</div>
           <div class="footer-info">
               联系方式：frontend@example.com | 备案号：粤ICP备12345678号            </div>
       </footer>
   </div></body></html>